﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TwKarma.Web.App.DefaultPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head runat="server">
    <title>#TwKarma</title>
	<link href="content/main.css" rel="stylesheet" type="text/css" />
	<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
</head>
<body>
<script type="text/javascript">
	$(document).ready(function () {

		$('#screenname').focus(function () {
			if ($(this).val() === "@screenname") {
				$(this).val("");
			}
			$(this).css('color', '#000');
		});

		$('#screenname').keyup(function (e) {
			if (e.keyCode == 13)
				doRedirect();
		});

		$('#gosearch').click(function () {
			doRedirect();
		});

		$.get('/Parts/Render.aspx?What=karmaglobal', function (data) {
			$('#karma_global').html(data);
		});

	});
    
	function doRedirect() {
        if ($('#screenname').val() === "@screenname") {
            alert('Enter your screenname');
            $('#screenname').focus();
        }

        var text = jQuery.trim($('#screenname').val());
        if (text.charAt(0) != '@')
            text = "@" + text;

        if (text.length > 0) {
            window.location = text;
        }
    }
    
</script>

	<div class="floatBackground"></div>
	<div class="page">

		<div class="header">
			<h1>#TwKarma</h1>		
		</div>
		
		<div class="findyours" style="position:relative;">
			<div class="findyourkarmaimage" ></div>
			<span class="css-hidden">Find your Karma</span><input type="text" class="text" id="screenname" value="@screenname" style="color: #ccc;" />
			<a id="gosearch"><span class="css-hidden">Search</span><div class="search" ></div></a>
		</div>
	
		<div class="content">
			<div class="box">
				<h2>How does it work?</h2>
				<p class="normal"><b>It's simple...</b> just tweet with #TwKarma tag, one or more @name @of @friends and +1 or -1.</p>
			</div>
			
			<div class="box">
				<h2>What's my Karma?</h2>
				<p class="normal">Type your screenname above and hit search.</p>
			</div>
			
			<div id="karma_global" style="padding: 10px;"></div>
		</div>
		
		
	</div>

</body>
</html>
